/* 此文件要在element主样式文件之后引入 */
/* 用了这种方法后，你不需要重写任何elementplus组件的颜色 */

:root {
  // 这里可以设置你自定义的颜色变量
  // 这个是element主要按钮:active的颜色，当主题更改后此变量的值也随之更改
  --el-color-primary-dark: #0d84ff;
}

/* 核心组件的变量，下面这些样式是必须要写的 */

.el-tag--light {
  --el-tag-background-color: var(--el-color-primary-light-9);
  --el-tag-border-color: var(--el-color-primary-light-8);
  --el-tag-font-color: var(--el-color-primary);
  --el-tag-hover-color: var(--el-color-primary);
}

.el-button--default:active {
  color: var(--el-color-primary-dark);
  border-color: var(--el-color-primary-dark);
}

.el-link.el-link--primary:hover {
  color: var(--el-color-primary-light-2);
}

.el-button--primary {
  --el-button-background-color: var(--el-color-primary);
  --el-button-border-color: var(--el-color-primary);
  --el-button-hover-color: var(--el-color-primary-light-2);
  --el-button-active-background-color: var(--el-color-primary-dark);
  --el-button-active-border-color: var(--el-color-primary-dark);
}

// 你也可以降nProgress的颜色改成element主色调
#nprogress {
  & .bar {
    background-color: var(--el-color-primary) !important;
  }
  & .peg {
    box-shadow: 0 0 10px var(--el-color-primary), 0 0 5px var(--el-color-primary) !important;
  }
  & .spinner-icon {
    border-top-color: var(--el-color-primary);
    border-left-color: var(--el-color-primary);
  }
}
